<template>
    <el-card shadow="never" class="pay_scale">
        <div class="title_box">
            <p class="title">支付金额占比</p>
            <el-date-picker
                v-model="params.date"
                class="selectDate"
                type="daterange"
                :disabled-date="disabledDate"
                :editable="false"
                range-separator="~"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                @change="changeDate"
                @calendar-change="calendarChange" />
        </div>
        <div v-show="whetherData" class="pie_box">
            <PieChart :pie-data="channelPay" :pie-title="'渠道支付金额占比'" />
            <PieChart :pie-data="StorePay" :pie-title="'店铺支付金额占比'" />
        </div>
        <div v-show="!whetherData" v-loading="loading" class="none_data" element-loading-text="加载中...">
            <img class="no_img" src="@/assets/noData.png" alt="" />
            <div>暂无数据</div>
        </div>
    </el-card>
</template>

<script lang="ts" setup>
import { ref, reactive, onBeforeMount, computed } from 'vue';
import { getDay } from '@/utils/utils';
import { payAmountProportionV1 } from '@/api/ecommerce/slaesStat.ts';
import PieChart from './PieChart.vue';

const loading = ref(true);

const channelPay = ref<any>([]);
const StorePay = ref<any>([]);
// 接口参数
const params = reactive({
    date: [getDay(-7), getDay(-1, true)] // 选择时间，默认是最近七天
});
// 选择时间做多支持选择90天的数据
const pickDay = ref();
const impose = ref(89);

const whetherData = computed(() => {
    return channelPay.value.length !== 0 && StorePay.value.length !== 0;
});

const disabledDate = (time: any) => {
    if (!pickDay.value) {
        return time.getTime() > Date.now() - 3600 * 1000 * 24;
    }
    const con1 = new Date(pickDay.value).getTime() - 89 * 24 * 60 * 60 * 1000;
    const con2 = new Date(pickDay.value).getTime() + 89 * 24 * 60 * 60 * 1000;
    const con3 = time.getTime() > Date.now() - 3600 * 1000 * 24;
    return con3 ? con3 : time.getTime() < con1 || time.getTime() > con2;
};

const calendarChange = (val: Date[]) => {
    const [pointDay] = val;
    pickDay.value = pointDay;
};

// 获取数据
const initData = async () => {
    loading.value = true;
    const res = await payAmountProportionV1(params).catch(() => {
        channelPay.value = [];
        StorePay.value = [];
    });
    loading.value = false;
    if (res) {
        channelPay.value = res.channel_proportion_list || [];
        StorePay.value = res.shop_proportion_list || [];
    }
};
// 选择时间后调用接口
const changeDate = (val: any) => {
    if (!val || !val.length) {
        pickDay.value = '';
        return;
    }
    const start = val[0] + ' ' + '00:00:00';
    const end = val[1] + ' ' + '23:59:59';
    params.date = [start, end];
    initData();
};
onBeforeMount(() => {
    initData();
});
</script>

<style lang="scss" scoped>
.pay_scale {
    margin-top: 15px;

    :deep(.el-card__body) {
        padding: 0;
    }

    .title_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 12px 24px;
        border-bottom: 1px solid #eaeaea;

        .title {
            display: flex;
            align-items: center;
            line-height: 16px;

            .box-icon {
                color: #ccc;
                margin-left: 4px;
            }
        }

        :deep(.selectDate) {
            max-width: 311px;
        }
    }

    .pie_box {
        display: flex;
        align-items: center;
    }

    .none_data {
        padding: 40px;
        margin: 100px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #909399;

        img {
            transform: translateX(15%);
        }
    }
}
</style>
